<template>
  <el-container>
    <el-main>
      <el-form :model="form"
               ref="form"
               :rules="rule"
               label-position="right"
               label-width="150px">
        <el-form-item label="图片:"
                      prop="imageUrl">
          <el-upload class="avatar-uploader"
                     :action="upload_url"
                     :show-file-list="false"
                     :on-success="uploadSuccess"
                     :before-upload="beforeUpload"
                     :headers="header"
                     name="shareImage">
            <img v-if="form.imageUrl"
                 :src="form.imageUrl"
                 class="avatar" />
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
            <div class="el-upload__tip"
                 slot="tip">图片大小不能超过2M</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="二维码宽度:"
                    prop="qrcode_w">
            <el-input type="number"
                  v-model.number="form.qrcode_w"
                  min="0"></el-input>
        </el-form-item>
        <el-form-item label="二维码高度:"
                    prop="qrcode_h">
            <el-input type="number"
                  v-model.number="form.qrcode_h"
                  min="0"></el-input>
        </el-form-item>
        <el-form-item label="二维码X位置:"
                    prop="qrcode_x">
            <el-input type="number"
                  v-model.number="form.qrcode_x"
                  min="0"></el-input>
        </el-form-item>
        <el-form-item label="二维码Y位置:"
                    prop="qrcode_y">
            <el-input type="number"
                  v-model.number="form.qrcode_y"
                  min="0"></el-input>
        </el-form-item>
        <el-form-item label="上线时间:"
                    prop="online_time">
                <el-date-picker v-model="form.online_time"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期">
                </el-date-picker>
        </el-form-item>
        <el-form-item label="下线时间:"
                    prop="offline_time">
                <el-date-picker v-model="form.offline_time"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期">
                </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="success"
                     icon="el-icon-plus"
                     @click.prevent="updateShare"
                     :loading="loading">修改</el-button>
          <el-button type="danger"
                     icon="el-icon-refresh"
                     @click.prevent="reset('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import { updShare, shareInfo } from '@/api/modules/appConfig'
import { STORAGE } from '@/components/common/global'
export default {
  name: "add",
  data () {
    return {
      upload_url: process.env.VUE_APP_API_BASE_URL + '/admin/share/upload/image',
      loading: false,
      form: {
        imageUrl: '',
        qrcode_x:0,
        qrcode_y:0,
        qrcode_w:0,
        qrcode_h:0,
        online_time:'',
        offline_time:''
      },
      rule: {
        imageUrl: [
          { required: true, message: '请上传图片信息' }
        ],
        qrcode_x: [
          { required: true, message: 'x位置必填', trigger: 'blur' },
        ],
        qrcode_y: [
          { required: true, message: 'y位置必填', trigger: 'blur' },
        ],
        qrcode_w: [
          { required: true, message: '宽度必填', trigger: 'blur' },
        ],
        qrcode_h: [
          { required: true, message: '高度必填', trigger: 'blur' },
        ],
        online_time: [
          { required: true, message: '上线时间必选', trigger: 'blur' },
        ],
        offline_time: [
          { required: true, message: '下线时间必选', trigger: 'blur' },
        ]
      },
      header: {
        'api-token': localStorage.getItem(STORAGE.API_TOKEN)
      },
    };
  },
  methods: {
    uploadSuccess (response, file, fileList) {
      if (response.status == 'success') {
            this.shareId = response.data;
            this.$message.success('上传成功');
            shareInfo({ id: this.shareId }).then(response => {
                this.form.imageUrl = response.data.bg_url;
                this.form.qrcode_x = response.data.qrcode_x;
                this.form.qrcode_y = response.data.qrcode_y;
                this.form.qrcode_w = response.data.qrcode_w;
                this.form.qrcode_h = response.data.qrcode_h;
                this.form.online_time = response.data.online_time;
                this.form.offline_time = response.data.offline_time;
            });
      } else {
        this.$notify.error(response.failedMsg);
      }
    },
    beforeUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
    reset (ref) {
      this.$refs[ref].resetFields();
    },
    updateShare () {
      var data = {
        id: this.shareId,
        qrcode_h:this.form.qrcode_h,
        qrcode_w:this.form.qrcode_w,
        qrcode_x:this.form.qrcode_x,
        qrcode_y:this.form.qrcode_y,
        online_time:this.form.online_time,
        offline_time:this.form.offline_time
      };
      this.loading = true;
      updShare(data).then(response => {
        this.loading = false;
        if (response.data.status !== 'failed') {
          this.$message.success('修改成功');
          shareInfo({ id: this.shareId }).then(response => {
            this.form.imageUrl = response.data.bg_url;
            this.form.qrcode_x = response.data.qrcode_x;
            this.form.qrcode_y = response.data.qrcode_y;
            this.form.qrcode_w = response.data.qrcode_w;
            this.form.qrcode_h = response.data.qrcode_h;
            this.form.online_time = response.data.online_time;
            this.form.offline_time = response.data.offline_time;
          });
        }
      }).catch(err => {
        this.loading = false;
      })
    }
  },
  mounted () {
    this.position = this.$route.query.position;
    // bannerType().then(response => {
    //   this.position = this.position.concat(response.data);
    // })
  }
}
</script>

<style scoped>
.el-container {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #f2f6fc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin: 10px auto;
  background-color: #fff;
  padding: 20px;
}

.el-header h3 {
  height: 30px;
  text-align: center;
  font-size: 20px;
  line-height: 30px;
  color: gray;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 375px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 100%;
  height: 100%;
}
.el-upload {
  width: auto;
}
</style>